/**
* 系列 查询、产品查询 - 页面 组建
*/
<template>
    <div :class="getName">
      <img src="@/assets/img/banner-vip.jpg" v-if="type === 'vip'"/>
      <img src="@/assets/img/query.jpg" v-else />
      
      <div class="h-search">
        <div class="h-inline" v-if="type === 'vip'">
          <el-input class="h-pro mr15" placeholder="请输入您的姓名" v-model="firstName"></el-input>
          <el-input class="h-pro" placeholder="请输入您的卡号或手机号" v-model="cardCode"></el-input>
        </div>
        
        <div class="h-inline" v-else>
          <el-input class="h-pro" placeholder="请输入产品条码" v-model="productCode"></el-input>
        </div>
        
        <el-input class="h-ver" placeholder="验证码" v-model="verification"></el-input>
        <span :style="{'color': codeColor(0, 255)}" @click="createCode(4)" class="h-code">
          {{ checkCode }}
        </span>
        <el-button @click.stop="handleSearchClick">搜索</el-button>
      </div>
      
      <div class="h-result" v-if="type === 'vip'">
        <h3>金友福 会员查询验证</h3>
        <div :key="item.mname" v-for="item in resultData" ><span>{{item.mname}}</span>{{item.mval}}</div>
        <!-- <p class="h-res-title">{{ resultData }}：</p>
        <div class="h-infor"><span>会员姓名：</span>铆钉大叔</div>
        <div class="h-infor"><span>会员等级：</span>金卡</div>
        <div class="h-infor"><span>注册时间：</span>2016-05-06</div> -->
        <!-- <div class="h-infor">
          <span>会员简介：</span>喜欢时尚，喜欢新潮的东西，“时尚”一词已是这个世界的潮流代言词，英文为fashion，几乎是经常挂在某些人的嘴边，频繁出现在报刊媒体上。很多人对时尚的理解都不同，有人认为时尚即是简单，与其奢华浪费，不如朴素节俭。
        </div> -->
              
      </div>
      <div class="h-result" v-else>
        <h3>金友福 产品查询验证</h3>
         <div :key="item.mname" v-for="item in resultData" ><span>{{item.mname}}</span>{{item.mval}}</div>
        <!-- <p class="h-res-title">{{ resultData }}：</p>
        <div class="h-infor" ><span>商品名称：</span>18k金钻戒</div>
        <div class="h-infor"><span>销售门店：</span>金友福大洋店</div>
         <div class="h-infor"><span>销售日期：</span>2019-12-09</div> -->
              
      </div>
    </div>
</template>
<script>
//import { searchList } from '@/mock' // 查询结果数据
import { searchData } from '@/api'

export default {
  name: 'QueryValid',
  props: [ 'type' ],
  data () {
    return {
      firstName: '', // 姓名
      cardCode: '', // 卡号
      productCode: '', // 产品条码
      verification: '', // 验证码
      checkCode: '', // 随机验证码
      resultData: '', // 查询结果
      terminal: '', // 终端类型
      searchtype:'ware'

    }
  },
  computed: {
    getName(){
      if(this.terminal === 'pc'){
        return 'h-query'
      } else {
        return 'h-query h-query-ph'
      }
    }
  },
  created () {
    this.terminal = localStorage.getItem('terminalm')
    console.log('this.terminal***', this.terminal)
    //this.searchtype='ware';
     
    if(this.type=='vip'){
      this.searchtype='vip';
    }
    else{
      this.searchtype='ware';
    }
    console.log('this.searchtype***', this.searchtype)
    this.createCode(4)
  },
  mounted () {
    //this.resultData = searchList.result.message // 接口联通后 删除
  },
  watch: {
    type: {
        handler(newValue, oldValue) {
            console.log(newValue);
            console.log(oldValue);
            if(newValue=='vip'){
              this.searchtype='vip';
            }
            else{
              this.searchtype='ware';
            }
        }
    }
},
  methods: {
    /**
     *@Description
     *@Param
     *@Return 生成随机验证码.
     **/
    handleSearchClick () {
      const params = {
        productCode: this.productCode,
        firstName:this.firstName,
        cardCode:this.cardCode,
        type:this.searchtype
      }
      if (this.verification.trim() == '' || (this.verification.trim().toLowerCase() != this.checkCode.trim().toLowerCase())) {
        console.log(this.verification.trim().toLowerCase())
        console.log(this.checkCode.trim().toLowerCase())
        this.$message.warning('请输入正确的验证码！')
        this.createCode(4)
        return false
      }
      console.log(this.searchtype);
      if(this.searchtype=='ware'){
        {
          if(this.productCode.trim()=='')
        {
          this.$message.warning('请输入产品条码！')
        }
        }
      }else{
        if(this.firstName.trim()=='' && this.cardCode.trim()=='')
        {
           this.$message.warning('请输入会员名称或者手机号会员卡号！')
           return
        }
         
      }
      searchData(params).then(res => {
        console.log(res)
        this.resultData = res
        this.verification=''
        this.createCode(4)
      })
    },
    /**
     *@Description
     *@Param
     *@Return 生成随机验证码.
     **/
    createCode (length) {
      let code = ''
      const codeLength = parseInt(length) // 验证码的长度
      // 所有候选组成验证码的字符，当然也可以用中文的
      const codeChars = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
        'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
      for (let i = 0; i < codeLength; i++) {
        const charNum = Math.floor(Math.random() * 62) // 获取随机验证码下标
        code += codeChars[charNum] // 组合成指定字符验证码
      }

      this.checkCode = code // 将生成验证码赋值到显示区
    },
    /**
     *@Description
     *@Param
     *@Return 生成随机颜色.
     **/
    codeColor (min, max) {
      let r = this.randomNum(min, max)
      let g = this.randomNum(min, max)
      let b = this.randomNum(min, max)
      return 'rgb(' + r + ',' + g + ',' + b + ')'
    },
    /**
     *@Description
     *@Param
     *@Return 生成随机数.
     **/
    randomNum (min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
  }
}
</script>

<style lang="scss" scoped>
  .h-query {
    img {
      width: 100%;
      height: 300px;
    }
    .h-search {
        margin: 30px 0;
        padding: 30px;
        text-align: center;
        border: 1px solid #dcdcdc;
    }
    .h-pro {
        width: 220px;
    }
    .h-ver {
        width: 120px;
        margin: 0 15px;
    }
    .h-code {
        font-size: 20px;
        font-weight: 900;
        display: inline-block;
        width: 70px;
        margin-right: 15px;
        vertical-align: middle;
        letter-spacing: 3px;
    }
    /* 产品查询结果 */
    .h-result {
      margin: 30px 0;
      padding: 15px;
      border: 1px solid #dcdcdc;
      h3 {
        font-family: '宋体';
        font-size: 30px;
        font-weight: normal;
        text-align: center;
        color: #333;
      }
      .h-res-title{
        margin: 10px 0;
        font-weight: 900;
      }
      .h-infor{
        margin-bottom: 5px;
        line-height: 20px;
        span{
          font-weight: 600;
          padding-right: 10px;
        }
      }
    }
  }
  /* 移动端 */
  .h-query.h-query-ph{
    padding: 0 15px;
    img{
      height: auto;
    }
    .h-search{
      text-align: left;
    }
    .h-pro{
      width: 100%;
      margin-bottom: 20px;
    }
    .h-ver{
      margin: 0 15px 0 0;
    }
  }
</style>
